<!DOCTYPE html>
<!-- saved from url=(0133)file:///Users/baloo/Desktop/HTML5/XAH160905/JavaScript/lessons_js_14/%E7%A2%B0%E6%92%9E%E6%A3%80%E6%B5%8B03(1%E7%A2%B0%E5%A4%9A).html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>
    <style media="screen">
      div{
        position: absolute;
        width: 200px;
        height: 200px;
        font-size:50px;
        line-height: 200px;
        text-align: center;
      }
      .moveBox{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        line-height: 100px;
        background: gray;
        cursor: pointer;
      }
      /*.hitBox:nth-of-type(2){
        background: lightgray;
        left: 40%;
        top: 0;
        height: 300px;
      }
      .hitBox:nth-of-type(3){
        background: lightgray;
        left: 40%;
        bottom: 0px;
        height: 300px;
      }*/
      .hitBox{
        left: 600px;
        top: 200px;
      }

    </style>
  </head>
  <body>
    <div class="moveBox" style="left: 81px; top: 242px;">小鸟</div>
    <div class="hitBox" style="background: lightgray;">管道1</div>
    <!-- <div class="hitBox" style="background: lightgray;">管道2</div> -->

  <script type="text/javascript">

      var moveBox = document.querySelector('.moveBox');
      var hitBoxs = document.querySelectorAll('.hitBox');


      //设置movBox的拖拽

      moveBox.onmousedown = function(evt){
         evt = evt || window.event;
         var disX = evt.clientX - moveBox.offsetLeft;
         var disY = evt.clientY - moveBox.offsetTop;
         moveBox.onmousemove = function(evt){
            var x = evt.clientX - disX;
            var y = evt.clientY - disY;
            moveBox.style.left = x + 'px';
            moveBox.style.top = y + 'px';
            // 碰撞检测
           for (var i = 0; i < hitBoxs.length; i++) {
               var result = circleHit(moveBox,hitBoxs[i]);
               if (result) {
                  hitBoxs[i].style.background = 'red';
                  hitBoxs[i].innerText = '撞到';
               }else{
                  hitBoxs[i].style.background ='lightgray';
                  hitBoxs[i].innerText = '管道' + (i + 1);
               }
           }

         }
         document.onmouseup = function(){
            moveBox.onmousemove = null;
         }

         return false;
      }


      // 碰撞检测函数
      function collisionDetection(obj1,obj2){
        // 获取移动块左边的偏移量
        var obj1Left = obj1.offsetLeft;
        // 获取移动块右边的偏移量
        var obj1Right = obj1.offsetWidth + obj1Left;
        // 获取移动块上边的偏移量
        var obj1Top = obj1.offsetTop;
        // 获取移动块下边的偏移量
        var obj1Bottom = obj1.offsetHeight + obj1Top;

        // 获取被撞块的左边偏移量
        var obj2Left = obj2.offsetLeft;
        // 获取被撞块的右边偏移量
        var obj2Right = obj2.offsetWidth + obj2Left;
        // 获取被撞块上边偏移量
        var obj2Top = obj2.offsetTop;
        // 获取被撞块底边的偏移量
        var obj2Bottom = obj2.offsetHeight + obj2Top;

        // 碰撞判断
        if (obj1Right < obj2Left || obj1Left > obj2Right || obj1Bottom < obj2Top || obj1Top > obj2Bottom) {
            // 没碰到
            return false;
        }else{
            // 碰到
            return true;
        }
      }



      // 圆形碰矩形
      function circleHit(obj1,obj2){
          // 获取圆半径
          var R = obj1.offsetWidth / 2;
          // 获取圆心的坐标
          var rX = obj1.offsetLeft + R;
          var rY = obj1.offsetTop + R;

          // 获取obj2四个角的坐标
          // 左上角
          var conerLeftTopX = obj2.offsetLeft;
          var conerLeftTopY = obj2.offsetTop;

          // 右上角
          var conerRightTopX = conerLeftTopX + obj2.offsetWidth;
          var conerRightTopY = conerLeftTopY;

          // 右下角
          var conerRightBottomX = conerLeftTopX + obj2.offsetWidth;
          var conerRightBottomY = conerLeftTopY + obj2.offsetHeight;

          // 左下角
          var conerLeftBottomX = conerLeftTopX;
          var conerLeftBottomY = conerRightBottomY

          // 圆心区域判断
          // 左上角
          var resultLeftTop =  (rX <= conerLeftTopX) && (rY <= conerLeftTopY);
          // 右上角
          var resultRightTop = (rX >= conerRightTopX) && (rY <= conerRightTopY);
          // 右下角
          var resultRightBottom = (rX >= conerRightBottomX) && (rY >= conerRightBottomY);
          // 左下角
          var resultLeftBottom =  (rX <= conerLeftBottomX) && (rY >= conerLeftBottomY);

          // 碰撞判断

          // 左上角
          if (resultLeftTop) {
            var l =  gu(conerLeftTopX - rX , conerLeftTopY - rY);
            if (l <= R) {
              return true;
            }else{
              return false;
            }
          }

          // 右上角
          if (resultRightTop) {
            var l =  gu(conerRightTopX - rX , conerRightTopY - rY);
            if (l <= R) {
              return true;
            }else{
              return false;
            }
          }


          // 右下角
          if (resultRightBottom) {
            var l =  gu(conerRightBottomX - rX , conerRightBottomY - rY);
            if (l <= R) {
              return true;
            }else{
              return false;
            }
          }

          // 左下角
          // 右上角
          if (resultLeftBottom) {
            var l =  gu(conerLeftBottomX - rX , conerLeftBottomY - rY);
            if (l <= R) {
              return true;
            }else{
              return false;
            }
          }

        //不在四个角判定范围内的情况，执行矩形判断
        var re = collisionDetection(obj1,obj2);
        return re;


      }

      // 勾股定理
      function gu(x,y){
        return Math.sqrt(x * x + y * y);
      }


  </script>

</body></html>
